<script setup>
    import { provide, onMounted } from 'vue'

    import LeftCard from '../../components/LeftCard.vue'
    import VisualMap from './components/VisualMap.vue'
    import VisualLive from './components/VisualLive.vue'
    import { getFluoriteList } from '@/api/visual'

    // 显示直播
    let visualLive = $ref(null)

    // 乡镇列表
    let townsList = $ref([])

    let townsListCopy = []

    // 设备列表
    let videoConfigurationList = $ref([])

    // 数据加载中
    let dataLoading = $ref(true)

    onMounted(() => {
        getFluoriteList().then(res => {
            dataLoading = false
            if(res.success){
                let { returnTownsList, yzVideoConfigurationList } = res.result
                townsList = returnTownsList
                townsListCopy = returnTownsList
                videoConfigurationList = yzVideoConfigurationList
            }
        })  
    })


    // 显示直播
    const showLive = (data) => {
        visualLive.showLiveDialog(data)
    }


    // 点击列表 村镇 在地图上显示该区域中心点
    let visualMap = $ref(null)
    const handleClickArea = (name) => {
        visualMap.setMapCenterPoint(name)
    }

    // 区域搜索
    const areaSearch = (keyword) => {
        let data = JSON.parse(JSON.stringify(townsListCopy))
        if(!keyword){
            townsList = data
            return
        }
        townsList = data.filter((item) => {
            if(item.name.indexOf(keyword) > -1){
                return item
            }
        })
    }

</script>

<template>
    <div class="irrigate-manage-wrap" v-loading="dataLoading">
        <visual-map 
            v-if="!dataLoading"
            :videoConfigurationList="videoConfigurationList"
            ref="visualMap"
            @showLive="showLive"
        ></visual-map>

        <div class="suspended-content-warp">

            <left-card @areaSearch="areaSearch">
                <div 
                    class="town-item font-b pointer" 
                    v-for="(item, index) in townsList"
                    :key="index"
                    @click.stop="handleClickArea(item.name)"
                >
                    {{ item.name }}({{ item.count }})
                </div>
            </left-card>

            <visual-live ref="visualLive"></visual-live>

        </div>

    </div>
</template> 

<style lang="less" scoped>
    .irrigate-manage-wrap{
        width: 100%;
        height: 100%;
        position: relative;

        .town-item{
            padding: 10px 20px;
            height: 40px;
            line-height: 20px;
            font-size: 18px;

            &:hover{
                text-shadow: 0 0 2px #52CCFF;
            }
        } 
    }
</style>